<template>
  <!-- 推荐阅读 -->
  <div class="container bg-fff">
    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="bg-banner-end"></div>
    <div class="bg-fff pw10">
      <div class="flex-b">
        <p class="fb f16 dark-blue">推荐阅读</p>
        <p class="f16">
          更多
          <van-icon name="arrow" />
        </p>
      </div>
      <!-- LIST -->
      <div class="border-bottom p10 relative">
        <img src="~assets/img/1.png" class="star" width="100px" alt />
        <!-- type:1 -->
        <!-- <div class="h90 flex-b">
          <div class="h90 flex-b flex-column">
            <div class="f20 w190 van-multi-ellipsis--l2">AAAAAAAAAAAAAAAAAAAASSSSS</div>
            <div class="flex-b f11 c-b5">
              <p>2020-3-4</p>
              <p>
                <van-icon name="eye-o" />已有2145 万人观看
              </p>
            </div>
          </div>
          <div class="w125">
            <img src="~assets/logo.png" width="100px" alt />
          </div>
        </div>-->

        <!-- type:2 -->
        <!-- <div>
          <p class="f16 fb">2019年我国风电、光伏全年运行情况</p>
          <div class="flex-b f11 c-b5">
            <p>2020-3-4</p>
            <p>
              <van-icon name="eye-o" />已有2145 万人观看
            </p>
          </div>
          <img src="~assets/logo.png" width="100%" height="190px" alt />
        </div>-->

        <!-- type:3 -->

        <div>
          <div class="f16 fb">
            新闻资讯｜两部委印发《关于推进电力交易机
            构独立规范运行...
          </div>
          <div class="flex-b f11 c-b5">
            <p>2020-3-4</p>
            <p>
              <van-icon name="eye-o" />已有2145 万人观看
            </p>
          </div>
          <div class="flex-b">
            <img src="~assets/logo.png" width="30%" height="80px" alt />
            <img src="~assets/logo.png" width="30%" height="80px" alt />
            <img src="~assets/logo.png" width="30%" height="80px" alt />
          </div>
        </div>
      </div>
    </div>
    <div class="bg-banner-end"></div>
    <div class="bg-fff pw10">
      <div class="flex-b">
        <p class="fb f16 dark-green">绿色建筑</p>
        <p class="f16">
          更多
          <van-icon name="arrow" />
        </p>
      </div>
      <div class="border-bottom p10 relative">
        <div class="h90 flex-b">
          <div class="h90 flex-b flex-column">
            <div class="f20 w190 van-multi-ellipsis--l2">AAAAAAAAAAAAAAAAAAAASSSSS</div>
            <div class="flex-b f11 c-b5">
              <p>2020-3-4</p>
            </div>
          </div>
          <div class="w125">
            <img src="~assets/logo.png" width="100px" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Tabbar, TabbarItem, Swipe, SwipeItem, Icon } from "vant";
import { mapActions, mapMutations, mapState } from "vuex"; // createNamespacedHelpers
// const { mapActions } = createNamespacedHelpers('test') // 可使用这种方式直接获得test模板

export default {
  name: "home",
  data() {
    return {
      value: 1,
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg"
      ]
    };
  },
  components: {
    [Button.name]: Button,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Icon.name]: Icon
  },
  computed: {
    ...mapState({
      loading: state => state["@@loading"].effects["test/onePlusAsync"]
    })
  },
  methods: {
    add() {
      this.onePlusAsync(this.value);
    },
    addOne() {
      this.onePlus(1);
    },
    // ...mapActions('home', ['initData', 'plusPage', 'initPage']),
    ...mapActions({
      onePlusAsync: "test/onePlusAsync"
    }),
    ...mapMutations({
      onePlus: "test/onePlus",
      logout: "user/LOGOUT"
    })
  }
};
</script>
<style lang="scss" scoped>
.container {
  height: auto;
  width: 100%;
  padding-bottom: 50px;
}
.banner {
  width: 100%;
  height: 212px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.bg-banner-end {
  height: 15px;
  background: rgba(244, 243, 252, 1);
}
.dark-blue {
  color: #0b1ca7;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.w190 {
  width: 190px;
  word-break: break-all;
}
.w125 {
  width: 125px;
}
.star {
  width: 40px;
  height: 40px;
  position: absolute;
  right: -10px;
  top: 0;
}
.dark-green {
  color: #00ae0d;
}
</style>
